<!--
 * @Author: liaoxing
 * @Date: 2021-08-16 15:21:00
 * @LastEditors: liaoxing
 * @LastEditTime: 2021-08-29 15:59:36
 * @Description: file content
 * @FilePath: \数据中心\src\views\home\BoardPage\AlarmBoard\charts\lineCharts.vue
-->
<template>
  <div :id='chatId' class='areaLineCharts'></div>
</template>

<script>
const echarts = require('echarts')
export default {
  name: 'annularchart',
  props: {
    id: {
      type: String
    },
    dataInfo: {
      type: Array
    }
  },
  data () {
    return {
      chatId: '',
      option: null,
      myChart: null,
      fontSize: 12
    }
  },
  created () {
    console.log(this.id)
    this.chatId = this.id
  },
  watch: {
    dataInfo: {
      deep: true,
      handler () {
        this.getOption(0)
      }
    }
  },
  mounted () {
    let that = this
    this.$nextTick(() => {
      that.drawChat()
    })
  },
  activated () { // 只有设置了keep-alive才生效
    this.$nextTick(() => {
      if (document.getElementById(this.chatId).clientHeight === 0) {
        console.log('activated...')
        this.myChart.resize()
      }
    })
  },
  methods: {
    drawChat () {
      var chartDom = document.getElementById(this.chatId)
      this.myChart = echarts.init(chartDom, null, {renderer: 'svg'})
      this.getOption(1)
    },
    getOption (type) {
      this.option = {
        grid: {
            left: '5%',
            right: '0%',
            bottom: '14%',
            top: '20%'
        },
        tooltip: {
          show: true,
          trigger: 'axis',
          axisPointer: {
            type: 'none'
          },
          borderWidth: 0,
          borderColor: '#104db1',
          backgroundColor: '#104db1',
          textStyle: {
            color: '#fff'
          }
        },
        // legend: {
        //     left: '0',
        //     icon: 'circle',
        //     textStyle: {
        //         color: '#ffffff',
        //         fontSize: this.fontSize
        //     }
        // },
        xAxis: {
            type: 'category',
            data: ['8:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20: 00'],
            axisLine: false,
            axisLabel: {
                color: '#fff'
            }
        },
        yAxis: {
            type: 'value',
            max: 30,
            splitNumber: 3,
            axisLabel: {
                color: '#fff'
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: '#011868'
                }
            }
        },
        series: [
            {
                data: this.dataInfo || [0, 17, 9, 19, 10, 16, 1],
                type: 'line',
                smooth: true,
                name: '报警数量',
                showSymbol:  true,
                symbolSize: 0,
                lineStyle: {
                    color: '#30CCFB',
                    width: 4
                },
                label: {
                  show: true,
                  position: 'top',
                  borderWidth: 0,
                  color: '#30CCFB',
                  fontSize: 14
                },
                areaStyle: {
                    opacity: 0.6,
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: '#30CCFB'
                    }, {
                        offset: 0.8,
                        color: '#082046'
                    }])
                },
                emphasis: {
                    focus: 'series'
                },
                zlevel: 1
            }
        ]
      }
      this.myChart.setOption(this.option, true)
      if (!type) return
      window.addEventListener('resize', this.listenResize)
    },
    listenResize () {
      let resizeTimer = setTimeout(() => {
        clearTimeout(resizeTimer)
        this.fontSize = (window.fontSize || 100) * 0.12
        this.getOption(0)
        this.myChart.resize()
      }, 100)
    }
  },
  beforeDestroy () {
    window.removeEventListener('resize', this.listenResize)
    if (!this.myChart) return
    this.myChart.clear()
  },
  deactivated () {
    window.removeEventListener('resize', this.listenResize)
    if (!this.myChart) return
    this.myChart.clear()
  }
}
</script>

<style>
.areaLineCharts {
    width: 100%;
    height: 100%;
  /* border: 1px solid wheat; */
}
</style>
